<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
		<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<meta HTTP-EQUIV="expires" CONTENT="0">
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" media="screen" />
		<title>搜索</title>

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<script type="text/javascript" src="js/vue.min2.2.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/polyfill.min.js"></script>

		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
		<script>
			jQuery(document).ready(function($) {
				var isLateralNavAnimating = false;
				//o打开或关闭导航菜单
				$('#cd-nav').on('click', function(event) {
					event.preventDefault();
					//若动画正在进行，则停止 
					if(!isLateralNavAnimating) {
						if($(this).parents('.csstransitions').length > 0)
							isLateralNavAnimating = true;

						$('body').toggleClass('navigation-is-open');
						$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
							//动画结束 
							isLateralNavAnimating = false;
						});
					}
				});
			});
		</script>

		<script src="js/mui.min.js"></script>
		<script>
			// 监听tap事件，解决 a标签 不能跳转页面问题
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
		</script>

		<style type="text/css">
			body {
				background: url(images/yuyin_bg.png) no-repeat;
				background-size: 100%;
			}
			
			@media all and (min-width: 640px) {
				body,
				html,
				.wenwen-footer,
				.speak_window {
					width: 640px!important;
					margin: 0 auto
				}
				.speak_window,
				.wenwen-footer {
					left: 50%!important;
					margin-left: -320px
				}
			}
			
			input,
			button {
				outline: none;
			}
			
			.wenwen-footer {
				width: 100%;
				position: fixed;
				bottom: -5px;
				left: 0;
				background: #fff;
				padding: 3%;
				border-top: solid 1px #ddd;
				box-sizing: border-box;
			}
			
			.wenwen_btn,
			.wenwen_help {
				width: 15%;
				text-align: center;
			}
			
			.wenwen_btn img,
			.wenwen_help img {
				height: 40px;
			}
			
			.wenwen_text {
				height: 40px;
				border-radius: 5px;
				border: solid 1px #636162;
				box-sizing: border-box;
				width: 66%;
				text-align: center;
				overflow: hidden;
				margin-left: 2%;
			}
			
			.circle-button {
				padding: 0 5px;
			}
			
			.wenwen_text .circle-button {
				font-size: 14px;
				color: #666;
				line-height: 38px;
			}
			
			.write_box {
				background: #fff;
				width: 100%;
				height: 40px;
				line-height: 40px;
				display: none;
			}
			
			.write_box input {
				height: 40px;
				padding: 0 5px;
				line-height: 40px;
				width: 100%;
				box-sizing: border-box;
				border: 0;
			}
			
			.wenwen_help button {
				width: 95%;
				background: #42929d;
				color: #fff;
				border-radius: 5px;
				border: 0;
				height: 40px;
				display: none;
			}
			
			#wenwen {
				height: 100%;
			}
			
			.speak_window {
				overflow-y: scroll;
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
			}
			
			.speak_box {
				margin-bottom: 70px;
				padding: 10px;
			}
			
			.question,
			.answer {
				margin-bottom: 1rem;
			}
			
			.question {
				text-align: right;
			}
			
			.question>div {
				display: inline-block;
			}
			
			.left {
				float: left;
			}
			
			.right {
				float: right;
			}
			
			.clear {
				clear: both;
			}
			
			.heard_img {
				height: 60px;
				width: 60px;
				border-radius: 5px;
				overflow: hidden;
				background: #ddd;
			}
			
			.heard_img img {
				width: 100%;
				height: 100%
			}
			
			.question_text,
			.answer_text {
				box-sizing: border-box;
				position: relative;
				display: table-cell;
				min-height: 60px;
			}
			
			.question_text {
				padding-right: 20px;
			}
			
			.answer_text {
				padding-left: 20px;
			}
			
			.question_text p,
			.answer_text p {
				border-radius: 10px;
				padding: .5rem;
				margin: 0;
				font-size: 14px;
				line-height: 28px;
				box-sizing: border-box;
				vertical-align: middle;
				display: table-cell;
				height: 60px;
				word-wrap: break-word;
			}
			
			.answer_text p {
				background: #fff;
			}
			
			.question_text p {
				background: #42929d;
				color: #fff;
				text-align: left;
			}
			
			.question_text i,
			.answer_text i {
				width: 0;
				height: 0;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
				position: absolute;
				top: 25px;
			}
			
			.answer_text i {
				border-right: 10px solid #fff;
				left: 10px;
			}
			
			.question_text i {
				border-left: 10px solid #42929d;
				right: 10px;
			}
			
			.answer_text p a {
				color: #42929d;
				display: inline-block;
			}
			
			audio {
				display: none;
			}
			
			.saying {
				position: fixed;
				bottom: 30%;
				left: 50%;
				width: 120px;
				margin-left: -60px;
				display: none;
			}
			
			.saying img {
				width: 100%;
			}
			
			.write_list {
				position: absolute;
				left: 0;
				width: 100%;
				background: #fff;
				border-top: solid 1px #ddd;
				padding: 5px;
				line-height: 30px;
			}
		</style>
	</head>

	<body style="background: #F9F7EC;" onload="to_write()">

		<header class="mui-bar mui-bar-nav" style="background: #F9F7EC;">
			<a href="" class="mui-icon mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#000000"></a>
			<h1 class="mui-title" id="h1">查询</h1>
		</header>

		<div class="mui-content" style="background: #F9F7EC;">

			<div class="mui-card-content">
				<div class="speak_box">
					<div class="answer">
						<div class="heard_img left"><img src="images/dglvyou.jpg"></div>
						<div class="answer_text">
							<p>Hey，您好！您想要查询什么呢？</p>
							<i></i>
						</div>
					</div>
				</div>
			</div>
			<div class="saying">
				<img src="images/saying.gif" />
			</div>
			<div class="wenwen-footer">
				<div class="wenwen_btn left" onClick="to_write()"><img src="images/jp_btn.png"></div>
				<div class="wenwen_text left">
					<div class="write_box">
						<input type="text" class="left" onkeydown="up_say1(event)" placeholder="请输入关键字" />
					</div>

				</div>
				<div class="wenwen_help right">
					<button onClick="up_say()" class="right">发送</button>

				</div>
				<div style="opacity:0;" class="clear"></div>
			</div>

		</div>

		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

		<script>
			function to_write() {
				$('.wenwen_btn img').attr('src', 'images/yy_btn.png');
				$('.wenwen_btn').attr('onclick', 'to_say()');
				$('.write_box,.wenwen_help button').show();
				$('.circle-button,.wenwen_help a').hide();
				$('.write_box input').focus();
				for_bottom();
			}

			function to_say() {

				javascript: location.reload();
				/*
				$('.write_list').remove();
				$('.wenwen_btn img').attr('src', 'images/jp_btn.png');
				$('.wenwen_btn').attr('onclick', 'to_write()');
				$('.write_box,.wenwen_help button').hide();
				$('.circle-button,.wenwen_help a').show();
				*/
			}

			function up_say1(e) {

				var key = window.event ? e.keyCode : e.which;
				if(key == 13) {
					up_say();
					//jQuery("#numberbutton").focus();
				}

			}

			function up_say() {

				$('.write_list').remove();
				var text = $('.write_box input').val(),
					str = '<div class="question">';
				str += '<div class="heard_img right"><img src="images/me.png"/></div>';
				str += '<div class="question_text clear"><p>' + text + '得到</p><i></i>';
				str += '</div></div>';

				if(text == '') {
					alert('请输入提问！');
					$('.write_box input').focus();
				} else {
					$('.speak_box').append(str);
					$('.write_box input').val('');
					$('.write_box input').focus();

					autoWidth();
					for_bottom();

					var text1 = '对不起，您说什么';
					var myurl;
					var stt;
					var ret;
					var isok;

					$.get('cview.php', {
						info: text
					}, function(data, status) {
						//data为返回对象，status为请求的状态
						//$("#getResponse").html(data); 
						//alert(data);
						ret = data;
						//此时假设服务器脚本会返回一段文字"你好，Robin！"，么浏览器就会弹出对话框显示该段文字
						isok = status;
						//结果为success, error等等，但这里是成功时才能运行的函数

						if(ret == '0') {

							$.post("curl.php", {
									//funcName: "questionToAnswer",
									info: text
								},
								function(data) {

									text1 = data.text;
									if(data.url) {
										myurl = data.url;
										stt = '：<a href="' + myurl + '" target="_blank" title="转到">链接</a>';
									} else {
										stt = '';
									}
									var ans = '<div class="answer"><div class="heard_img left"><img src="images/dglvyou.jpg"/></div>';
									ans += '<div class="answer_text"><p>' + text1 + stt + '</p><i></i>';
									ans += '</div></div>';
									$('.speak_box').append(ans);
									for_bottom();
								}, "json");

						} else {
							text1 = ret;
							var ans = '<div class="answer"><div class="heard_img left"><img src="images/dglvyou.jpg"/></div>';
							ans += '<div class="answer_text"><p>' + text1 + '</p><i></i>';
							ans += '</div></div>';
							$('.speak_box').append(ans);

							for_bottom();
						}

					});

				}
			}

			function keyup() {
				var footer_height = $('.wenwen-footer').outerHeight(),
					text = $('.write_box input').val(),
					str = '<div class="write_list">' + text + '</div>';
				if(text == '' || text == undefined) {
					$('.write_list').remove();
				} else {
					$('.wenwen-footer').append(str);
					$('.write_list').css('bottom', footer_height);
				}
			}

			function for_bottom() {
				var speak_height = $('.speak_box').height();
				$('.speak_box,.speak_window').animate({
					scrollTop: speak_height
				}, 500);
			}

			function autoWidth() {
				$('.question_text').css('max-width', $('.question').width() - 60);
			}
			autoWidth();
		</script>

	</body>

</html>